<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.cjs.js"></script> -->
</head>

<body>
    <div class="box">
        <h1>{{name}}</h1>
        <!--可以渲染-->
        <h1>{{msg}}</h1>
        <!-- mustache表达式  三元表达式-->
        <!-- 条件? 答案1:答案2 -->
        <h3>{{flag?answerY:answerN}}</h3>

    </div>
    <div>
        <h1>{{name}}</h1>
        <!--不可渲染-->
    </div>
    <div class="box2">
        <h1>{{msg}}</h1>
    </div>
    <div class="box3">
        <h1>{{name}}</h1>
        <h2>{{obj.name}}</h2>
    </div>
    <script>
        // Vue是渐进式的JavaScript框架，它的核心库只关注视图层，主要进行声明式渲染，动态构建用户界面。
        // 数据驱动视图 只关心视图层 vue当中不操作dom

        // 特点：响应式，编码简洁，体积小，运行效率高，适合移动/PC端开发；本身只关注UI，可以轻松移入
        // vue插件或者其他第三方库开发项目；遵循MVVM模式。

        //兼容性：Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5特性（该特性主
        // 要指Object.defineProperty()）。但它支持所有兼容 ECMAScript 5 的浏览器。

        /* MVVM模式 Model-View-ViewModel
        即模型-视图-视图模型。模型（Model）指的是后端传递的数据。视图(View)指的是所看到的页面。视图
        模型(ViewModel)是 mvvm 模式的核心，它是连接 view 和 model 的桥梁。它有两个方向：一是将模型
        Model）转化成视图(View)，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。
        二是将视图(View)转化成模型(Model)，即将所看到的页面转化成后端的数据 
        */
        let vm = new Vue({  //  配置对象  Vue是vue文件自带的构造函数
            el: '.box', //输入在哪里使用就添加哪里的名字(元素的名字) 如:.box
            data: { //data对象中的所有属性都加入到vue响应式系统:值一更改视图也会发生改变,只更改数据即可   
                // 可直接在页面上渲染的数据(只能在el:所添加的元素里渲染)

                name: '王洋洋沙雕',
                msg: '你吃饱了吗',
                flag: false,
                answerY: '吃饱了', //true
                answerN: '没有' //false
            }
        })
        /*{{}} 双大括号表达式或称为Mustache语法,作用就是显示data中的数据
        mustache语法中既可以写变量,也可以写表达式
        */
        //    vm 是Vue的实例对象
        console.log(vm);
        //vm该对象上有很多挂着$的方法,这些方法都是vue实例对象上的方法
        /*配置对象中data的属性在那些地方能看见?
        vm实例对象上 vm._data  vm.$data    
        查询:vm.name ,vm._data.name , vm.$data
        修改: vm.name = '要改的名字'
        */
         
        // 冻结对象前提把要冻结的对象提炼出来 如data
        let data = {
            msg:'xxx'
        }
        //冻结对象,阻止数据的响应式追踪  (冻结后不能修改)
        // Object.freeze(data);
        let vm2 = new Vue({
            el:'.box2',
            data:data
        })
        vm2.msg = 'yyy';
        let obj = {
                    name:'tom',
                    age:18
        };
        Object.freeze(obj);
        let vm3 = new Vue({
            el:'.box3',
            data:{
                obj,
                name:'jack'
            }
        })
        vm3.name = '666';
        vm3.obj.name = '777';
    </script>
</body>

</html>